<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <el-button type="primary">添加角色</el-button>
          <el-table :data="roleslist" border stripe >
              <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-row  :class="['bdborder',i1==0?'topborder':'','vcenter']" v-for="(item1, i1) in scope.row.children" :key="item1.id">
                        <!-- 渲染一级菜单 -->
                        <el-col :span="5">
                            <el-tag closable @close="removeRights(scope.row,item1.id)">{{item1.authName}}</el-tag>
                            <i class="el-icon-caret-right"></i>
                        </el-col>
                        <!-- 渲染二级菜单 -->
                        <el-col :span="19">
                            <el-row :class="[i2==0?'':'topborder','vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id">
                                <el-col :span="6">
                                    <el-tag type="success" closable @close="removeRights(scope.row,item2.id)">{{item2.authName}}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col > 
                                <!-- 三级菜单  -->
                                <el-col :span="18">
                                    <el-tag type="warning" closable @close="removeRights(scope.row,item3.id)"  v-for="item3 in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                  </template>
              </el-table-column>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="角色名称" prop="roleName"></el-table-column>
              <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                        <el-button-group>
                            <el-button size="mini" type="primary" :id="scope.row.id" icon="el-icon-edit">编辑</el-button>
                            <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                            <el-button size="mini" @click="showDailog(scope.row)" type="warning" icon="el-icon-setting">分配权限</el-button>
                        </el-button-group>
                  </template>
              </el-table-column>
          </el-table>
        </el-card>

        <!-- 分配权限 -->
        <el-dialog title="分配权限" :visible.sync="dialogVisible" width="30%"  @close="closedDailog">
            <!-- 树形控件 -->
            <el-tree ref="treeref" :data="rightslist" :props="treeProps" show-checkbox node-key="id" 
            default-expand-all highlight-current :default-checked-keys="defKeys"></el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="subDailog">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //用户角色列表
            roleslist:[],
            //是否打开分配权限弹出框
            dialogVisible: false,
            rightslist:[],
            treeProps:{
                children:'children',
                label:'authName'
            },
            //默认选中的结点
            defKeys:[],
            roleId:0
        }
    },
    created(){
        this.getRoleslist();
    },
    methods:{
        async getRoleslist(){
            const {data:res} = await this.$http.get('roles');
            if(res.meta.status!=200) return this.$message.error('角色列表获取失败');

            this.roleslist = res.data;
        },
        //权限删除
        async removeRights(role,id){
        const result =  await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)
            if(result!=='confirm') return this.$message.info('取消删除');
            const {data:res} = await this.$http.delete(`roles/${role.id}/rights/${id}`)
            console.log(res);
            if(res.meta.status!==200){
                return this.$message.error('删除角色权限失败');
            }
             role.children = res.data;
        },
        //弹出分配权限对话框
        async showDailog(node){
            this.roleId = node.id;
            const {data:res} = await this.$http.get('rights/tree')
            if(res.meta.status!=200){
                return this.$message.info('获取权限列表失败')
            }
            this.rightslist = res.data;
            //递归获取id值
            this.getLeafKeys(node,this.defKeys)
            this.dialogVisible = true;
        },
        // 递归获取所有三级节点的id保存在defKeys数组中
        getLeafKeys(node,arr){
            if(!node.children){
             return arr.push(node.id)
            }
            node.children.forEach(element => {
                this.getLeafKeys(element,arr);
            });
        },
        //关闭对话框时清空数组
        closedDailog(){
            this.defKeys = [];
        },
        async subDailog(){
            const keys = [
                ...this.$refs.treeref.getCheckedKeys(),
                ...this.$refs.treeref.getHalfCheckedKeys()
            ]
            const str = keys.join(',')
           const {data:res} = await this.$http.post(`roles/${this.roleId}/rights`,{
               rids:str
           })
           console.log(res);
           if(res.meta.status!=200){
               return this.$message.error('修改权限失败')
           }
            this.$message.success('修改成功');
            this.getRoleslist();
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="less" scoped>
.el-tag{
    margin: 7px;
}
.topborder{
    border-top: 1px solid #eee;
}
.bdborder{
    border-bottom: 1px solid #eee;
}
.vcenter{
    display: flex;
    align-items: center;
}
</style>